<script setup>
import {ref} from "vue"
import { httpRequest } from '../../utils/http';
import { onLoad } from "@dcloudio/uni-app";


const active = ref({})
onLoad((e)=>{
    console.log(JSON.parse(e));
    active.value = JSON.parse(e)
})


</script>

<template>
    <view class="page">
        <view class="top">
            <view class="top-name">
                <text>{{active.taskName}}</text>
                <text style="font-size: 28rpx;color: rgb(144,147,153);">删除任务</text>
            </view>
            <text class="date">{{active.createTime}}</text>
        </view>
        <view class="num">
            <view class="num-item">
                <text style="font-size: 40rpx;color: rgb(69,70,74);margin-bottom: 12rpx;">{{active.videoNum}}</text>
                <text>发布视频数</text>
            </view>
            <view class="num-item">
                <text style="font-size: 40rpx;color: rgb(69,70,74);margin-bottom: 12rpx;">1</text>
                <text>达人数</text>
            </view>
        </view>
        <view class="task">
            <view class="title">
                <view class="line"></view>
                <text>视频素材</text>
            </view>
            <view class="task-item">任务名</view>
        </view>
        <view class="phone">
            <view class="title">
                <view class="line"></view>
                <text>达人号</text>
            </view>
            <view class="phone-item">12345678910</view>
        </view>
        <view class="time">
            <view class="title">
                <view class="line"></view>
                <text>发布时间</text>
            </view>
            <view class="time-item">
                <text>20202</text>
                <text>未发布</text>
            </view>

        </view>


    </view>
</template>

<style scoped lang="scss">
    .page{
        padding: 30rpx;
        box-sizing: border-box;
        .top{
            .top-name{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12rpx;
                font-size: 36rpx;
                color: rgb(48,49,51);
            }
            .date{
                    font-size: 24rpx;
                    color: rgb(144,147,153);
                    margin-bottom: 30rpx;
                }
        }
        .num{
            display: flex;
            justify-content: space-between;
            margin: 30rpx 0;
            .num-item{
                width: 330rpx;
                height: 160rpx;
                background-color: #fff;
                border-radius: 16rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 28rpx;
                color: rgb(144,147,153);
            }
        }
        .task{
            background-color: #fff;
            padding: 30rpx;
            box-sizing: border-box;
            border-radius: 16rpx;
            margin-bottom: 30rpx;
            .task-item{
                font-size: 28rpx;
                color: rgb(69,70,74);
            }
        }
        .phone{
            background-color: #fff;
            padding: 30rpx;
            box-sizing: border-box;
            border-radius: 16rpx;
            margin-bottom: 30rpx;
            .phone-item{
                font-size: 28rpx;
                color: rgb(69,70,74);
            }
        }
        .time{
            background-color: #fff;
            padding: 30rpx;
            box-sizing: border-box;
            border-radius: 16rpx;
            margin-bottom: 30rpx;
            .time-item{
                font-size: 28rpx;
                color: rgb(69,70,74);
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }
    }
    .title{
                display: flex;
                align-items: center;
                font-size: 32rpx;
                font-weight: 500;
                color: rgb(48,49,51);
                margin-bottom: 24rpx;
                .line{
                    width: 6rpx;
                    height: 32rpx;
                    border-radius: 16rpx;
                    background-color: rgb(142,84,244);
                    margin-right: 6rpx;
                }
            }
</style>